<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'loadFontFace'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view :onekit-class="`page-body-info display-area ${loaded?'font-loaded':''}`">
				<onekit-text v-if="!loaded">Load {{ fontFamily }}</onekit-text>
				<onekit-text v-else>{{ fontFamily }} is loaded</onekit-text>
			</onekit-view>
			<onekit-view onekit-class="btn-area">
				<onekit-button type="primary" @Tap="loadFontFace">加载字体</onekit-button>
				<onekit-button type="default" @Tap="clear">清除</onekit-button>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "动态加载字体",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["page-body-info display-area ","loaded","Load ","fontFamily"," is loaded"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'动态加载字体',
        "path":'packageAPI/pages/load-font-face/load-font-face'
};
    },
    "data":{
        "fontFamily":'Bitstream Vera Serif Bold',
        "loaded":false
},
    "onLoad"(){
      this.setData({
        "loaded":false
});
    },
    "loadFontFace"(){
      const self = this;
      wx.loadFontFace({
        "family":this.data.fontFamily,
        "source":'url("https://sungd.github.io/Pacifico.ttf")',
        "success"(res){
          console.log(res.status);
          self.setData({
            "loaded":true
});
        },
        "fail"(res){
          console.log(res.status);
        },
        "complete"(res){
          console.log(res.status);
        }
});
    },
    "clear"(){
      this.setData({
        "loaded":false
});
    }
});

</script>
<style 
 lang="css">
.page-body-info {
  align-items: center ;
  padding: 100px 0 ;
}
.font-loaded {
  font-family: "Bitstream Vera Serif Bold" ;
}
.display-area {
  font-size: 20px ;
}
</style>